<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.test3 .s1:first-of-type {
				background-color: #FFA500;
			}

			.test4 span:first-child {
				background-color: orange;
			}

			.test6 .s1:nth-child(2) {
				background-color: #FFA500;
			}

			.test7 .s1:nth-of-type(2) {
				background-color: #FFA500;
			}
		</style>
	</head>
	<body>
		<h4>first-of-type：标签类型 和 类名 都符合“第一个”才生效</h4>
		<div class="test3">
			<label class="s1">label</label>
			<label class="s1">label</label>
			<span class="s1">span</span>
			<span class="s1">span</span>
			<span class="s1">span</span>

			<div class="">div</div>
			<div class="s1">div</div>
			<div class="s1">div</div>
			<div class="s1">div</div>
		</div>

		<h4>first-child：匹配第一个span且是第一个子元素</h4>
		<div class="test4">
			<span>1111</span>
			<span>1111</span>
			<span>1111</span>
			<span>1111</span>
			<span>1111</span>
		</div>

		<h4>nth-child(n)匹配第n个子元素，序号从1开始，nth-child(1)等同于first-child</h4>
		<div class="test6">
			<span>111</span>
			<span class="s1">222</span>
			<span class="s1">333</span>
			<span class="s1">444</span>
			<span>555</span>
		</div>

		<h4>nth-of-type(n)匹配相同类型的子元素的第n个，序号从1开始，nth-of-type(1)等同于first-of-type</h4>
		<div class="test7">
			<label class="s1">111</label>
			<label class="s1">222</label>
			<span class="s1">333</span>
			<span class="s1">444</span>
			<span class="s1">555</span>
		</div>

	</body>
</html>